<!--
* description: 索赔管理-索赔维护-编辑/修改
* author: xuliwen
* createdDate: 2021-3-4
-->

<template>
  <section class="claimdetails">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      :title="textMap[popupsState]"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />
      <div class="btns-container">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          :disabled="comp.disabled"
          @click="comp.clickEvent"
        >
          {{ comp.text }}
        </el-button>
      </div>
      <!-- 基本信息 -->
      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>
      <!-- 车辆信息 -->
      <div class="filter-container filter-title">车辆信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList2">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @clickEvent="receiveEvent(comp.clickEvent)"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>
      <!-- 客户信息 -->
      <div class="filter-container filter-title">客户信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList3">
          <component
            :is="comp.component"
            v-for="comp in tableComponents3.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>
      <!-- 其他信息 -->
      <div class="filter-container filter-title">故障信息</div>
      <el-tabs v-model="activeName" style="background: #ffff">
        <div class="filter-container filter-params">
          <el-row ref="vailComponentList4">
            <component
              :is="comp.component"
              v-for="comp in tableComponents4.filter((o) => o.isMust === true)"
              :ref="
                comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey
              "
              :key="comp.compKey"
              :validrule="comp.validrule"
              :code-field="comp.codeField"
              :text-field="comp.textField"
              :popups-key="comp.compKey"
              :parent-fileds="comp.parentFileds"
              :code="formField[comp.codeField]"
              :disabled="comp.disabled"
              :o-fields="comp.oFields"
              :options="comp.options"
              :custom-obj="comp.customObj"
              :is-require="comp.isRequire"
              :is-mul="comp.isMul"
              :span="comp.span || 8"
              :label-name="comp.labelName"
              :lookuptype="comp.lookuptype"
              :data-to-object="comp.dataToObj"
              :date-options-type="comp.dateOptionsType"
              @changeCode="getComponentCode"
              @focusCode="getFocusCode"
            />
          </el-row>
        </div>
        <div class="filter-container filter-title">
          附件信息
          <span class="spanStyle">
            必填项，单个文件大小不超过50M
          </span>
        </div>

        <OneTableTemplate
          ref="table_3_1"
          :dynamic-buttons="tableButtons_4_2"
          :dynamic-table-cols="tableHeader_4_2"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :is-show-pagination="false"
        />

        <div class="filter-container filter-title">索赔工时</div>
        <OneTableTemplate
          ref="table_3_2"
          :dynamic-table-cols="tableHeader_4_3"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :is-show-pagination="false"
        />
        <div class="filter-container filter-title">索赔备件</div>
        <OneTableTemplate
          ref="table_3_3"
          :dynamic-table-cols="tableHeader_4_4"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :is-show-pagination="false"
        />
        <div class="filter-container filter-title">索赔其他项目</div>
        <OneTableTemplate
          ref="table_3_4"
          :dynamic-table-cols="tableHeader_4_5"
          :dynamic-table-defult-height="300"
          :dynamic-is-show-select="false"
          :is-show-pagination="false"
        />
      </el-tabs>
    </el-dialog>
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import dialogHeader from '@/components/dialogHeader'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import request from '@/utils/request'
import api from '@/api/se/apiClaimService'

export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dynamicEditRowData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      isExists: false, // 上传附件判断
      tableButtons: [
        {
          compKey: 'btnKey0',
          size: 'small',
          text: '保存',
          position: 'right',
          clickEvent: () => this.save()
        },
        {
          compKey: 'btnKey1',
          size: 'small',
          text: '提交',
          position: 'right',
          clickEvent: () => this.submit()
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          text: '作废',
          position: 'right',
          clickEvent: () => this.submitViod(),
          disabled: false
        }
      ],
      tableComponents1: [
        {
          compKey: 'key0',
          labelName: '门店编码：',
          codeField: 'dlrCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '门店名称：',
          codeField: 'dlrFullName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '索赔单号：',
          codeField: 'claimCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '单据状态：',
          codeField: 'claimStatus',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '索赔员：',
          codeField: 'empName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '索赔员电话：',
          codeField: 'workTel',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '索赔分类：',
          codeField: 'claimType',
          oFields: 'claimCategoryCode,claimCategoryName',
          customObj: {
            api: api.findClaimCategory,
            selectType: '1'
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true,
          isRequire: true
        },
        {
          compKey: 'key7',
          labelName: '活动编号：',
          codeField: 'actionCode',
          component: () => import('@/components/org/LookupValue'),
          oFields: 'statusId,statusText',
          options: [
            { statusId: '1', statusText: '文章1' },
            { statusId: '0', statusText: '文章' }
          ],
          type: 'dropdownList',
          isMust: true
          // isRequire: true,
        },
        {
          compKey: 'key8',
          labelName: '索赔月份：',
          codeField: 'claimMonth',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key9',
          labelName: '提交日期：',
          codeField: 'submitDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key12',
          labelName: '工时费：',
          codeField: 'wiAmount',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key13',
          labelName: '备件费：',
          codeField: 'partAmount',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key14',
          labelName: '其他费用：',
          codeField: 'otherAmount',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key15',
          labelName: '总金额：',
          codeField: 'sumAmount',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1600',
          labelName: '同意单号：',
          codeField: 'agreeNO',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        }
      ],
      tableComponents2: [
        {
          compKey: 'key0',
          labelName: '派工单号：',
          codeField: 'repairOrderCode',
          isMul: false,
          component: () => import('@/components/se/sparePartNameCode'),
          type: 'inputText',
          isMust: true,
          disabled: false,
          isRequire: true
        },
        {
          compKey: 'key1',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车型：',
          codeField: 'carConfigCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '进厂时间：',
          codeField: 'repairDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '保修开始日期：',
          codeField: 'invoiceDate',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker.vue'),
          type: 'datePicker',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '行驶里程：',
          codeField: 'mileage',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '购件里程：',
          codeField: 'payMileage',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          validrule: {
            isformat: /^[+]{0,1}(\d+)$/
          },
          isMust: true

        },
        {
          compKey: 'key7',
          labelName: '购件日期：',
          codeField: 'payDate',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker.vue'),
          type: 'datePicker',
          isMust: true

        },
        {
          compKey: 'key8',
          labelName: '保修申请单号：',
          codeField: 'preAuthorCode',
          clickEvent: () => this.goClaimApplication(),
          component: () => import('@/components/org/commonInput/indexLink.vue'),
          isMust: true
          // disabled: true,
        },
        {
          compKey: 'key9',
          labelName: 'VIN码：',
          codeField: 'VIN',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key11',
          labelName: '车辆用途：',
          codeField: 'buyCaruseCodeName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key12',
          labelName: '生产日期：',
          codeField: 'produceDate',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker.vue'),
          type: 'datePicker',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key13',
          labelName: '前电机号：',
          codeField: 'engineCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key14',
          labelName: '后电机号：',
          codeField: 'engineCode2',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key15',
          labelName: '底盘号：',
          codeField: 'underpanNO',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key16',
          labelName: '变速箱号：',
          codeField: 'ectCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      tableComponents3: [
        {
          compKey: 'key0',
          labelName: '车主姓名：',
          codeField: 'custName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '性别：',
          codeField: 'gender',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主手机：',
          codeField: 'phone',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '省份：',
          codeField: 'addrPrivince',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '城市：',
          codeField: 'addrCity',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '区县：',
          codeField: 'addrCounty',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '街道地址：',
          codeField: 'addrStreet',
          // span: 12,
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '送修人：',
          codeField: 'repairMan',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '送修人电话：',
          codeField: 'repairTel',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      tableComponents4: [
        {
          compKey: 'key0',
          labelName: '故障类型：',
          codeField: 'custType',
          textField: 'custTypeName',
          customObj: {
            api: api.findCustType,
            selectType: '1',
            defOptionFields: ['custType', 'custTypeName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true,
          isRequire: true
        },
        {
          compKey: 'key2',
          labelName: '主损件名称：',
          codeField: 'mainFaultCode',
          oFields: 'mainFaultCode,mainFaultName',
          textField: 'mainFaultName',
          options: [],
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key1',
          labelName: '主损件编码：',
          codeField: 'mainFaultCode',
          textField: 'mainFaultCode',
          oFields: 'mainFaultCode,mainFaultName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '故障日期：',
          codeField: 'faultDate',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker.vue'),
          type: 'datePicker',
          isMust: true,
          isRequire: true
        },
        {
          compKey: 'key4',
          labelName: '故障现象码：',
          codeField: 'csCode',
          oFields: 'csCtCode,csCtName',
          customObj: {
            api: api.findFaultPhenomenon,
            selectType: '1'
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true
        },
        // {
        //   compKey: "key5",
        //   labelName: "故障原因码：",
        //   codeField: "saleOrderCode",
        //   isMul: false,
        //   component: () => import('@/components/org/commonInput/searchInput'),
        //   type: "inputText",
        //   isMust: true,
        // },
        {
          compKey: 'key6',
          labelName: '故障部位：',
          codeField: 'faultPartCode',
          textField: 'faultPartName',
          oFields: 'faultPartCode,faultPartName',
          customObj: {
            api: api.findFaultPartName,
            selectType: '1'
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key9',
          labelName: '故障描述：',
          codeField: 'custComplainCS',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 24
        },
        {
          compKey: 'key10',
          labelName: '诊断过程：',
          codeField: 'detailCheckSynopsis',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'dropdownList',
          isMust: true,
          isRequire: true,
          span: 24
        },
        {
          compKey: 'key11',
          labelName: '故障处理：',
          codeField: 'repairWay',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 24
        }
      ],
      tableComponents: [],
      tableHeader_4_2: [
        {
          prop: 'controlBtn',
          label: '操作', // 操作
          codeField: 'orgName',
          width: null,
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey0',
              align: 'center',
              labelName: '删除',
              codeField: 'orgName',
              clickEvent: (index) => this.delete(index),
              component: () => import('@/components/org/linkButton')
            }
          ]
        },
        {
          label: '附件名称',
          prop: 'fileName',
          align: 'center'
        },
        {
          label: '附件路径',
          prop: 'attachmentFilePath',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'fileRemark',
          align: 'center'
        }
      ],
      tableButtons_4_2: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.handFileListChange(),
          name: 'importTemplate',
          position: 'upload',
          text: '附件上传'
        }
      ],
      tableHeader_4_3: [
        {
          label: '工时编码',
          prop: 'wiCode'
        },
        {
          label: '维修内容',
          prop: 'wiName'
        },
        {
          label: '工时数',
          prop: 'wiQty'
        },
        {
          label: '工时单价',
          prop: 'wiPrice'
        },
        {
          label: '索赔系数',
          prop: 'claimWiCoef'
        },
        {
          label: '费用合计',
          prop: 'wiTotal'
        }
      ],
      tableHeader_4_4: [
        {
          label: '备件编码',
          prop: 'partNo'
        },
        {
          label: '备件名称',
          prop: 'partName'
        },
        {
          label: '数量',
          prop: 'partQty'
        },
        {
          label: '单价',
          prop: 'partPrice'
        },
        {
          label: '索赔系数',
          prop: 'claimPartCoef'
        },
        {
          label: '费用合计',
          prop: 'partTotal'
        }
      ],
      tableHeader_4_5: [
        {
          label: '其他项目No',
          prop: 'otherFeeId',
          hidden: true,
          alwaysHidden: true
        },
        {
          label: '其他项目',
          prop: 'otherFeeName'
        },
        {
          label: '费用',
          prop: 'otherFee'
        },
        {
          label: '备注',
          prop: 'otherRemark'
        }
      ],

      formField: {
        dlrCode: '',
        dlrFullName: '',
        claimStatus: '',
        empName: '',
        workTel: '',
        claimType: '',
        claimCode: '',
        actionCode: '',
        claimMonth: '',
        submitDate: '',
        shipAmount: '0',
        wiAmount: '0',
        partAmount: '0',
        otherAmount: '0',
        sumAmount: '',
        repairOrderCode: '',
        carLicense: '',
        carConfigCn: '',
        repairDate: '',
        invoiceDate: '',
        mileage: '',
        payMileage: '',
        payDate: '',
        preAuthorCode: '',
        VIN: '',
        buyCaruseCodeName: '',
        produceDate: '',
        engineCode: '',
        engineCode2: '',
        underpanNO: '',
        ectCode: '',
        gender: '',
        phone: '',
        agreeNO: '',
        addrPrivince: '',
        addrCity: '',
        addrCounty: '',
        addrStreet: '',
        repairMan: '',
        repairTel: '',
        custType: '',
        partNo: '',
        partName: '',
        faultDate: '',
        csCode: '',
        faultDTC: '',
        remark: '',
        custName: '',
        custComplainCS: '',
        detailCheckSynopsis: '',
        repairWay: '',
        faultPartCode: '',
        fujianInfo: [],
        workingHoursInfo: [],
        sparePartInfo: [],
        otherInfo: [],
        repairOrderId: '',
        mainFault: '',
        mainFaultName: '',
        mainFaultCode: ''
      },
      // 标题
      textMap: {
        edit: '保修鉴定单维护',
        add: '保修鉴定单维护'
      }
    }
  },
  watch: {
    // 派工单号
    'formField.repairOrderCode': {
      handler: function(val) {
        if (val) {
          this.getInfoDispatchOrderNo(val)
        }
      }
    }
  },
  created() {
    console.log('dynamicEditRowData', this.dynamicEditRowData)
    if (this.popupsState === 'edit') {
      this.tableButtons[2].disabled = false
      this.tableComponents2[0].disabled = true
      this.$requestAPI({
        apiUrl: api.findClaimDetail.APIUrl,
        variables: { claimCode: this.dynamicEditRowData.claimCode }
      }).then((response) => {
        this.formField.fujianInfo = response.rows[0].fujianInfo

        if (response.result === '1') {
          this.formField = response.rows[0]

          this.tableComponents4[1].options = response.rows[0].mainFault
          this.$refs['table_3_2'].list = this.formField.workingHoursInfo
          this.$refs['table_3_3'].list = this.formField.sparePartInfo
          this.$refs['table_3_4'].list = this.formField.otherInfo
          this.$refs['table_3_1'].list = this.formField.fujianInfo
        }
      })
    }

    this.tableComponents = [
      ...this.tableComponents1,
      ...this.tableComponents2,
      ...this.tableComponents3,
      ...this.tableComponents4
    ]
  },

  methods: {
    // 派工单联动带出dispatchOrderNo
    getInfoDispatchOrderNo(val) {
      if (this.popupsState === 'add') {
        this.$requestAPI({
          apiUrl: api.dispatchOrderNo.APIUrl,
          variables: {
            repairOrderCode: val,
            repairOrderId: this.formField.repairOrderId
          }
        }).then((res) => {
          if (res.result === '1') {
            this.formField = Object.assign(this.formField, res.rows[0])
            this.formField.empName = this.formField.empInfo.empName
            this.formField.workTel = this.formField.empInfo.workTel
            this.formField.VIN = res.rows[0].vin
            this.tableComponents4[1].options = this.formField.mainFault
            this.$refs['table_3_2'].list = this.formField.workingHoursInfo
            this.$refs['table_3_3'].list = this.formField.sparePartInfo
            this.$refs['table_3_4'].list = this.formField.otherInfo
          }
        })
      }
    },

    // 上传附件
    handFileListChange(file, fileList) {
      if (this.beforeAvatarUpload(file)) {
        this.handleChange(file)
      }
    },
    beforeAvatarUpload(file) {
      if (file.size > 50 * 1024 * 1024) {
        this.$message({
          message: '文件大小不能超过50M',
          type: 'warning'
        })
        return false
      }
      const fileType = file.name.substr(file.name.lastIndexOf('.') + 1)
      const fileTypes = ['doc', 'docx', 'xlsx', 'xls', 'pptx', 'ppt', 'txt', 'rar', 'zip', '7z', 'jpg', 'png', 'gif', 'ico', 'icon', 'jpeg', 'bmp', 'xml', 'pdf', 'apk', 'aip', 'mp3', 'mp4', 'html']
      if (fileTypes && fileTypes.length > 0) {
        for (var i = 0; i < fileTypes.length; i++) {
          if (fileTypes[i] === fileType) {
            this.isExists = true
            break
          } else {
            this.isExists = false
          }
        }
      }
      if (this.isExists === false) {
        this.$message({
          message: '不支持此格式文件！',
          type: 'warning'
        })
        return false
      }
    },
    handleChange(param) {
      const that = this
      const url = '/mp/file/notice/upload.do'
      that.$requestUpload(url, param).then((response) => {
        if (response.result === '1') {
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          //  路径
          const attachmentFilePath = response.path[0][0].split('|')[1]
          // 文件名
          const fileName = response.path[0][0].split('|')[0]
          const claimFileId = ''
          const dataParmas = { fileName, attachmentFilePath, claimFileId }
          that.$refs['table_3_1'].list.push(dataParmas)
          this.formField.fujianInfo = that.$refs['table_3_1'].list
        }
      })
    },

    // 删除附件
    delete(index) {
      if (this.popupsState === 'add') {
        this.$refs['table_3_1'].list.splice(index, 1)
      } else {
        this.$requestAPI({
          apiUrl: api.delectFile.APIUrl,
          variables: {
            claimFileId: this.$refs['table_3_1'].list[index].claimFileId
          }
        }).then(res => {
          if (res.result === '1') {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000
            })
            this.$refs['table_3_1'].list.splice(index, 1)
          } else {
            this.$message({
              message: res.msg,
              type: 'warn',
              duration: 1000
            })
          }
        })
      }
    },

    // 索赔单作废
    submitViod() {
      let urlApi = ''
      const info = {}

      urlApi = api.zfClaimDetail.APIUrl
      info.claimID = this.formField.claimID
      request({
        url: urlApi,
        method: 'post',
        data: info
      }).then((res) => {
        if (res.result === '1') {
          this.$message.success(res.msg)
          this.$emit('update:popupsVisible', false)
          this.$parent.queryTable()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 新增索赔单、索赔单修改
    save() {
      const that = this
      this.$utils.validataMoth(this, 'validpopup')
      // obj.claimStatus = 0; // 保存状态传0  提 交传10
      if (this.valid) {
        if (that.popupsState === 'edit') {
          that.editSave()
        } else {
          that.addSave()
        }
      } else {
        this.$message('必填项未填！')
      }
    },

    // 提交
    submit() {
      const loading = this.$loading({ text: `请稍等...` })
      const that = this
      const formFieldAll = that.formField
      formFieldAll.claimStatus = 10
      formFieldAll.fujianInfo = this.$refs.table_3_1.list
      console.log(formFieldAll)
      const queryObj = {
        type: 'mutation',
        apiConfig: api.claimantAdd,
        variables: formFieldAll
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        loading.close()
        if (response.result === '1') {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          this.$emit('update:popupsVisible', false)
          this.$parent.queryTable(1)
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            duration: 1000
          })
        }
      })
    },

    // 编辑保存
    editSave() {
      const that = this
      const formFieldAll = that.formField
      formFieldAll.claimStatus = 0
      formFieldAll.fujianInfo = this.$refs.table_3_1.list
      this.sendMethods(formFieldAll, api.claimantAdd)
    },

    // 新增保存
    addSave() {
      const that = this
      const formFieldAll = that.formField
      formFieldAll.claimStatus = 0
      this.sendMethods(formFieldAll, api.claimantAdd)
    },
    // 公共方法
    sendMethods(addData, ApiObj) {
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: ApiObj,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: addData

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          this.closeEdit()
          this.$nextTick(() => {
            this.$parent.queryTable()
          })
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            duration: 1000
          })
        }
      })
    },

    // 关闭弹窗
    closeEdit() {
      this.$emit('update:popupsVisible', false)
      this.reset()
    }
  }
}
</script>

<style lang='scss' scoped>
.btns-container {
  width: 100%;
  height: 30px;
  padding: 20px 20px 0 20px;
  background-color: #fff;
  .el-button {
    float: right;
    margin-left: 10px;
  }
}
/deep/.el-tab-pane {
  position: relative;
}
.spanStyle {
  position: absolute;
  left: 120px;
  color: red;
  line-height: 24px;
  margin-top: 38px;
}
/deep/#searchFormGroup {
  display: inline-block;
  width: 120px;
}
/deep/#UE-e3s {
  height: auto;
}
/deep/.el-table {
  height: auto !important;
  min-height: 40px;
}
/deep/.el-table__empty-block {
  height: auto;
  min-height: 35px;
}
/deep/ .el-table__body-wrapper {
  height: auto !important;
  min-height: 35px;
}
/deep/.el-table__empty-text {
  display: none;
}
</style>

